<!--
 * @Description: 
 * @Author: chenjiaxin
 * @Date: 2022-09-04 15:08:11
 * @LastEditTime: 2022-09-04 17:17:04
 * @FilePath: \vue-ts-vite\src\views\drawer\index.vue
-->
<template>
  <div class="Drawer">
    <h3>抽屉</h3>
    <p>看下naive-ui的抽屉</p>
    <n-button @click="open()">打开naive</n-button>
    <n-drawer v-model:show="active" :width="502" placement="right">
      <n-drawer-content title="斯通纳">
        《斯通纳》是美国作家约翰·威廉姆斯在 1965 年出版的小说。
      </n-drawer-content>
    </n-drawer>

    <name></name>
    <p>
      对naive-ui的抽屉进行封装。关闭抽屉后, 下次再打开
      basic-drawer组件是不会重写创建的, 里面的内容部分是会重写创建执行.
    </p>
    <p>
      本来是想下次打开抽屉后,basic-drawer组件也要在执行创建过程,好像这样不行,basic-drawer组件中的setup函数下次不会执行了
    </p>
    <n-button @click="openPro()">打开封装后的抽屉</n-button>
    <basic-drawer v-model:show="isShow">
      <div>我只封装后的内容</div>
    </basic-drawer>
  </div>
</template>

<script lang="ts">
// import { ref } from "vue";
export default {
  name: "drawer",
};
</script>

<script lang="ts" setup>
import { ref, onBeforeMount } from "vue";
import BasicDrawer from "@/components/basic-drawer";
import Name from "./components/name.vue";
const active = ref(false);
const open = () => {
  active.value = true;
};

const isShow = ref(false);
const openPro = () => {
  isShow.value = true;
};
onBeforeMount(() => {
  console.log("====生命周期函数===onBeforeMount");
});
</script>

<style scoped lang="less"></style>
